<template>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" center :width="dialogWidth" @close="handleDialogCancel()" destroy-on-close>
        <el-form :model="state.form"  :rules="rules" ref="ruleFormRef" status-icon>
            <el-form-item label="用户名">
                <el-input v-model="state.form.username" disabled />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="state.form.password"  placeholder="输入重置密码"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleDialogCancel()">关闭</el-button>
                <el-button type="primary" @click="handleDialogConfirm(ruleFormRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { list, remove, add, edit } from '@/api/user'
import { ElMessage, ElTable } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { dialogAutoWidth } from '@/utils/dialog'

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    username: [{ required: true, message: "用户名不能为空", trigger: 'blur' }],
    password: [{ required: true, message: "密码不能为空", trigger: 'blur' }],
})

let dialogWidth = ref("30%")
// 生命周期
onMounted(() => {
    getWindowResize()
})
// 获取屏幕尺寸
const getWindowResize = function () {
    dialogWidth.value = dialogAutoWidth;
}


let state = reactive<any>({
    form: {
        id: "",
        nickname: "",
        phone: "",
        email: "",
        sex: 0,
        active: true,
        username: "",
        password: "",
        qq: "",
        wechat: "",
        avatar: "",
    },
})

// 传值
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        required: true,
        default: false,
    },
    dialogTitle: {
        type: String,
        required: true,
        default: '',
    },
    dialogData: {
        type: Object,
        default: () => { },
    }
})
// 监听
watch(() => props.dialogData, () => {
    state.form = props.dialogData;
}, { deep: true, immediate: true })


// 事件派发
const emits = defineEmits(["dialogClose", "getListData"])

// 弹框中的取消按钮事件
const handleDialogCancel = () => {
    emits("dialogClose", false)
};

// 弹出框确定按钮事件
const handleDialogConfirm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            let res: any = {};
            if (state.form.id == "") {
                res = await add(state.form);
            } else {
                res = await edit(state.form);
            }
            if (res.code == "200") {
                ElMessage.success(res.message)
                emits('getListData')
                handleDialogCancel();
            }
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}


</script>
<style lang="less" scoped>
</style>